<template>
  <div class="container">
    <title-head1 :title="'各省累计充电量统计(今日)'"></title-head1>

    <div class="group">
      <div ref="pieChartRef" style="width: 100%;height: 100%"></div>
    </div>
  </div>
</template>
<script setup lang="ts">

import TitleHead1 from "@/components/TitleHead1.vue";

import {ref, onMounted, onBeforeUnmount, nextTick} from 'vue'
import * as echarts from 'echarts'

const pieChartRef = ref(null)
let chartInstance: any = null
let highlightTimer: any = null

  // 新增数据源定义
  const chartData = ref([
    {name: '湖北', value: 11},
    {name: '浙江', value: 10.5},
    {name: '河北', value: 9},
    {name: '四川', value: 8},
    {name: '湖南', value: 5}
  ])
// 初始化图表
const initChart = () => {
  console.log(pieChartRef)

  if (!pieChartRef.value) return

  chartInstance = echarts.init(pieChartRef.value)


  // 初始化图表部分修改
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: (params: any) => {
        if (params.seriesId == 'b2') {
          return '';
        }
        return `${params.name}: ${params.value}`;
      },
      backgroundColor: 'rgba(10,26,76,0.8)',
      borderColor: 'rgb(27,201,210)',
      textStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      data: chartData.value.map(item => item.name),
      axisLabel: {
        color: '#fff'  // 设置x轴文字颜色
      },
      axisTick: {
        show: false
      },
    },
    yAxis: {
      axisLabel: {
        color: '#fff'
      },
      interval: 4, // 设置刻度间隔为5
      splitNumber: 4, // 指定分割段数
      minorTick: {
        show: false // 隐藏次要刻度
      },
      splitLine: {
        show: true // 隐藏分割线
      }
    },
    grid: {
      top: 30,
      right: 10,
      bottom: 30,  // 为x轴标签留出空间
      left: 40     // 为y轴标签留出空间
    },
    series: [
      {
        type: 'bar',
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicOut',
        animationDelay: (idx: number) => idx * 100,
        data: [11, 10.5, 9, 8, 5],
        barWidth: '28',
        itemStyle: {
          color: (params: any) => {
            const maxValue = Math.max(...chartData.value.map(i => i.value));
            const isMax = chartData.value[params.dataIndex].value === maxValue;
            const baseColor = isMax 
              ? '241, 217, 85' 
              : '27, 201, 210';
            return {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {offset: 0, color: `rgba(${baseColor}, 0.8)`},
                {offset: 1, color: `rgba(${baseColor}, 0)`}
              ]
            }
          }
        }
      },
      {
        type: 'bar',
        animation: true,
        id: 'b2',
        animationDuration: 1200,
        animationEasing: 'cubicOut',
        animationDelay: (idx: number) => idx * 100 + 200,
        data: chartData.value.map(item => item.value * 0.95),
        barGap: '-100%',
        barWidth: '35',
        itemStyle: {
          color: (params: any) => {
            const maxValue = Math.max(...chartData.value.map(i => i.value));
            const isMax = chartData.value[params.dataIndex].value === maxValue;
            const baseColor = isMax 
              ? '241, 217, 85' 
              : '27, 201, 210';
            return {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {offset: 0, color: `rgba(${baseColor}, ${isMax ? 0.8 : 0.8})`},
                {offset: 1, color: `rgba(${baseColor}, 0)`}
              ]
            }
          }
        }
      }
    ]
  };

  chartInstance.setOption(option)
}

const updateChartData = () => {
  chartData.value = chartData.value.map(item => ({
    ...item,
    value: Math.floor(Math.random() * 12) // 生成0-12随机整数
  }));
  
  // 更新图表
  if (chartInstance) {
    chartInstance.setOption({
      series: [
        {
          data: chartData.value.map(item => item.value)
        },
        {
          data: chartData.value.map(item => item.value * 0.95)
        }
      ]
    });
  }
};

// 生命周期
onMounted(() => {
  nextTick(initChart)
  highlightTimer = setInterval(updateChartData, 2000);

})

onBeforeUnmount(() => {
  // 清理资源
  if (highlightTimer) clearInterval(highlightTimer)
  if (chartInstance) chartInstance.dispose()
})
</script>

<style scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 10px 0; /* 设置上下边距 */
}

.group {
  height: calc(100% - 40px);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #0A1A4C;

}
</style>